<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🖼️ 简单图片上传</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        .container {
            background: white;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }
        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
            font-size: 2.5em;
        }
        .upload-area {
            border: 3px dashed #667eea;
            border-radius: 10px;
            padding: 40px;
            text-align: center;
            margin: 20px 0;
            background: #f8f9ff;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        .upload-area:hover, .upload-area.dragover {
            border-color: #764ba2;
            background: #f0f2ff;
            transform: translateY(-2px);
        }
        .upload-area input[type="file"] {
            display: none;
        }
        .upload-icon {
            font-size: 4em;
            color: #667eea;
            margin-bottom: 20px;
        }
        .btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 25px;
            cursor: pointer;
            font-size: 16px;
            transition: all 0.3s ease;
            margin: 10px;
        }
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
        }
        .preview {
            max-width: 200px;
            max-height: 200px;
            border-radius: 10px;
            margin: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        .image-gallery {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 20px;
            margin-top: 30px;
        }
        .gallery-item {
            background: #f8f9ff;
            border-radius: 10px;
            padding: 15px;
            text-align: center;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
        }
        .gallery-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.15);
        }
        .gallery-item img {
            width: 100%;
            height: 150px;
            object-fit: cover;
            border-radius: 8px;
            margin-bottom: 10px;
        }
        .progress {
            display: none;
            margin: 20px 0;
            background: #e0e0e0;
            border-radius: 10px;
            overflow: hidden;
        }
        .progress-bar {
            height: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 10px;
            transition: width 0.3s ease;
            text-align: center;
            color: white;
            line-height: 20px;
            font-size: 12px;
        }
        .message {
            padding: 15px;
            margin: 10px 0;
            border-radius: 8px;
            text-align: center;
        }
        .success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
        .error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
        .info { background: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }
    </style>
</head>
<body>
    <div class="container">
        <h1>🖼️ 简单图片上传</h1>
        
        <div class="upload-area" id="uploadArea">
            <div class="upload-icon">☁️</div>
            <h3>点击选择图片或拖拽图片到此处</h3>
            <p class="text-muted">支持 JPG、PNG、GIF 格式</p>
            <input type="file" id="fileInput" accept="image/*" multiple>
        </div>
        
        <div style="text-align: center;">
            <button class="btn" onclick="uploadFiles()">📤 上传图片</button>
            <button class="btn" onclick="clearSelection()">🗑️ 清除选择</button>
            <button class="btn" onclick="loadImages()">🔄 刷新图库</button>
        </div>
        
        <div class="progress" id="uploadProgress">
            <div class="progress-bar" id="progressBar">0%</div>
        </div>
        
        <div id="message"></div>
        
        <div id="preview"></div>
        
        <h2 style="margin-top: 40px; color: #333;">📸 图片库</h2>
        <div class="image-gallery" id="imageGallery">
            <p style="text-align: center; color: #666;">暂无图片，请先上传一些图片</p>
        </div>
    </div>

    <script>
        let selectedFiles = [];
        
        // 拖拽上传功能
        const uploadArea = document.getElementById('uploadArea');
        const fileInput = document.getElementById('fileInput');
        const preview = document.getElementById('preview');
        const imageGallery = document.getElementById('imageGallery');
        const uploadProgress = document.getElementById('uploadProgress');
        const progressBar = document.getElementById('progressBar');
        const message = document.getElementById('message');
        
        // 点击上传
        uploadArea.addEventListener('click', () => fileInput.click());
        
        // 文件选择
        fileInput.addEventListener('change', handleFileSelect);
        
        // 拖拽功能
        uploadArea.addEventListener('dragover', (e) => {
            e.preventDefault();
            uploadArea.classList.add('dragover');
        });
        
        uploadArea.addEventListener('dragleave', () => {
            uploadArea.classList.remove('dragover');
        });
        
        uploadArea.addEventListener('drop', (e) => {
            e.preventDefault();
            uploadArea.classList.remove('dragover');
            const files = Array.from(e.dataTransfer.files).filter(file => file.type.startsWith('image/'));
            handleFileSelect({ target: { files: files } });
        });
        
        function handleFileSelect(event) {
            const files = Array.from(event.target.files);
            const imageFiles = files.filter(file => file.type.startsWith('image/'));
            
            if (imageFiles.length === 0) {
                showMessage('请选择图片文件', 'error');
                return;
            }
            
            selectedFiles = imageFiles;
            displayPreview();
            showMessage(`已选择 ${imageFiles.length} 张图片`, 'info');
        }
        
        function displayPreview() {
            if (selectedFiles.length === 0) {
                preview.innerHTML = '';
                return;
            }
            
            let html = '<h3>预览</h3><div style="display: flex; flex-wrap: wrap; gap: 10px;">';
            selectedFiles.forEach((file, index) => {
                const reader = new FileReader();
                reader.onload = (e) => {
                    const img = document.createElement('img');
                    img.src = e.target.result;
                    img.className = 'preview';
                    img.title = file.name;
                    preview.appendChild(img);
                };
                reader.readAsDataURL(file);
            });
            html += '</div>';
        }
        
        function uploadFiles() {
            if (selectedFiles.length === 0) {
                showMessage('请先选择图片文件', 'error');
                return;
            }
            
            uploadProgress.style.display = 'block';
            let uploaded = 0;
            const total = selectedFiles.length;
            
            function uploadNext() {
                if (uploaded >= total) {
                    uploadProgress.style.display = 'none';
                    showMessage(`成功上传 ${total} 张图片！`, 'success');
                    selectedFiles = [];
                    preview.innerHTML = '';
                    loadImages();
                    return;
                }
                
                const file = selectedFiles[uploaded];
                const formData = new FormData();
                formData.append('image', file);
                
                // 模拟上传进度
                let progress = 0;
                const progressInterval = setInterval(() => {
                    progress += Math.random() * 30;
                    if (progress > 90) {
                        clearInterval(progressInterval);
                    }
                    updateProgress((uploaded / total * 100) + (progress / total));
                }, 100);
                
                // 使用本地存储模拟上传
                setTimeout(() => {
                    clearInterval(progressInterval);
                    saveImageToLocal(file);
                    uploaded++;
                    updateProgress(uploaded / total * 100);
                    uploadNext();
                }, 1000 + Math.random() * 1000);
            }
            
            uploadNext();
        }
        
        function saveImageToLocal(file) {
            const reader = new FileReader();
            reader.onload = (e) => {
                const images = JSON.parse(localStorage.getItem('uploadedImages') || '[]');
                const imageData = {
                    name: file.name,
                    data: e.target.result,
                    size: file.size,
                    uploadTime: new Date().toISOString()
                };
                images.push(imageData);
                localStorage.setItem('uploadedImages', JSON.stringify(images));
            };
            reader.readAsDataURL(file);
        }
        
        function loadImages() {
            const images = JSON.parse(localStorage.getItem('uploadedImages') || '[]');
            displayGallery(images);
        }
        
        function displayGallery(images) {
            if (images.length === 0) {
                imageGallery.innerHTML = '<p style="text-align: center; color: #666;">暂无图片，请先上传一些图片</p>';
                return;
            }
            
            let html = '';
            images.forEach((image, index) => {
                html += `
                    <div class="gallery-item">
                        <img src="${image.data}" alt="${image.name}">
                        <p>${image.name}</p>
                        <p style="font-size: 12px; color: #666;">${formatFileSize(image.size)}</p>
                        <button class="btn" style="background: #dc3545;" onclick="deleteImage(${index})">🗑️ 删除</button>
                    </div>
                `;
            });
            imageGallery.innerHTML = html;
        }
        
        function deleteImage(index) {
            if (confirm('确定要删除这张图片吗？')) {
                const images = JSON.parse(localStorage.getItem('uploadedImages') || '[]');
                images.splice(index, 1);
                localStorage.setItem('uploadedImages', JSON.stringify(images));
                loadImages();
                showMessage('图片删除成功', 'success');
            }
        }
        
        function clearSelection() {
            selectedFiles = [];
            preview.innerHTML = '';
            fileInput.value = '';
            showMessage('已清除选择', 'info');
        }
        
        function updateProgress(percent) {
            progressBar.style.width = percent + '%';
            progressBar.textContent = Math.round(percent) + '%';
        }
        
        function showMessage(text, type = 'info') {
            message.innerHTML = `<div class="message ${type}">${text}</div>`;
            setTimeout(() => {
                message.innerHTML = '';
            }, 3000);
        }
        
        function formatFileSize(bytes) {
            if (bytes === 0) return '0 Bytes';
            const k = 1024;
            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }
        
        // 页面加载时显示已上传的图片
        window.addEventListener('load', () => {
            loadImages();
        });
    </script>
</body>
</html>